<template>
  <div style="background-color: #FFFFFF; width: 100%; height: 1000px; padding: 15px;">
    <div style="margin-left: 26px; font-size: 13px; font-weight: bold;">
      <span>数据趋势</span>
    </div>
    <div style="margin-left: 20px;margin-top: 20px; padding:5px">
      <a-row :gutter="16">

        <a-col :span="5">
          <div >
            <a-range-picker v-model="riqi"
                            :show-time="{ format: 'HH:mm' }"
                            format="YYYY-MM-DD HH:mm"
                            :placeholder="['开始时间', '结束时间']"
                            @change="onChange"
                            @ok="onOk"
                            style="width: 100%"
            />
          </div>
        </a-col>


        <a-col :span="1">
          <div >
            <a-button @click="today()" type="link">
              今天
            </a-button>
          </div>
        </a-col>
        <a-col :span="1">
          <div >
            <a-button @click="yesterday()" type="link">
              昨日
            </a-button>
          </div>
        </a-col>
        <a-col :span="1">
        <div >
          <a-button @click="weEk()" type="link">
            本周
          </a-button>
        </div>
      </a-col>
        <a-col :span="1">
        <div >
          <a-button @click="lastMonth()" type="link">
            上个月
          </a-button>
        </div>
      </a-col>
        <a-col :span="1">
        <div >
          <a-button @click="nSixMonths()" type="link">
            近六个月
          </a-button>
        </div>
      </a-col>

        <div style="float: right">
          <a-button @click="changeCheckFlag(false)" type="primary">
            柱形图1
          </a-button>
        </div>

        <div style="float: right; margin-right: 1%;">
          <a-button @click="changeCheckFlag(true)" type="primary">
            折线图
          </a-button>
        </div>

      </a-row>

      <div style="width: 100%; ">
        <div v-show="checkPageFlag">
          <div id="graph" ></div>
        </div>
        <div v-show="!checkPageFlag">
          <div id="graph2" ></div>
        </div>
      </div>

      <div style="margin-top: 5px;">
        <a-table :columns="columns" :data-source="data" >
          <a slot="name" slot-scope="text,record">{{ text }}</a>
        </a-table>
      </div>
      <!--      @click="edit(record)-->

    </div>
  </div>

</template>
<script>

import * as echarts from 'echarts';

const columns = [
  {
    title: '序号',
    dataIndex: 'serialNumber',
    key: 'serialNumber',

  },
  {
    title: '工序',
    dataIndex: 'process',
    key: 'process',

  },
  {
    title: '电耗',
    dataIndex: 'powerConsumption',
    key: 'powerConsumption',
    ellipsis: true,
  },
  {
    title: '时间',
    dataIndex: 'Time',
    key: 'Time',
    ellipsis: true,
  },

];

const data = [
  {
    key: '1',
    serialNumber: '01',
    process: '细沙',
    powerConsumption: '55c6',
    Time:'2021-7-21',
  },

];


export default {
  data() {
    return {
      checkPageFlag:true,
      riqi:undefined,
      data,
      columns,
      options: [
        {
          value: 'zhejiang',
          label: 'Zhejiang',
          children: [
            {
              value: 'hangzhou',
              label: 'Hangzhou',
              children: [
                {
                  value: 'xihu',
                  label: 'West Lake',
                },
              ],
            },
          ],
        },
        {
          value: 'jiangsu',
          label: 'Jiangsu',
          children: [
            {
              value: 'nanjing',
              label: 'Nanjing',
              children: [
                {
                  value: 'zhonghuamen',
                  label: 'Zhong Hua Men',
                },
              ],
            },
          ],
        },
      ],
    };
  },

  mounted() {
    if(this.checkPageFlag){
      this.getEchartsData()
    }

  },
  methods: {
    today(){
    },
    yesterday(){

    },
    weEk(){

    },
    lastMonth(){

    },
    nSixMonths(){

    },
    // edit(item){
    //
    // },


    changeCheckFlag(flag){
      this.checkPageFlag = flag
      if(this.checkPageFlag){
        this.$nextTick(function () {
          this.getEchartsData()
        });
      }else{
        this.$nextTick(function () {
          this.getEchartsData2()
        });
      }
    },
    onChange(value, dateString) {
      console.log('Selected Time: ', value);
      console.log('Formatted Selected Time: ', dateString);
    },
    onOk(value) {
      console.log('onOk: ', value);
    },

    getEchartsData(){
      var myChart = echarts.init(document.getElementById('graph'));
      let option = {
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            smooth: true
          }
        ]
      };
      myChart.setOption(option);
    },
    getEchartsData2(){
      var myChart = echarts.init(document.getElementById('graph2'));
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: 'Direct',
            type: 'bar',
            barWidth: '60%',
            data: [10, 52, 200, 334, 390, 330, 220]
          }
        ]
      };
      myChart.setOption(option);
    },
  },
};
</script>

<style lang="less" scoped>
#graph {
  width: 80%;

  height: 400px;
}
#graph2 {
  width: 80%;

  height: 400px;
}

</style>
